// Zoom 1.4 - jQuery image zooming plugin
// (c) 2012 Jack Moore - jacklmoore.com
// license: www.opensource.org/licenses/mit-license.php

(function ($) {
    var defaults = {
        url: false,
        duration: 120
    };

    $.fn.zoom = function (options) {
        return this.each(function () {
            var 
			root = this,
			$root = $(root),
			img = new Image(),
			$img = $(img),
			position = $root.css('position'),
			settings = $.extend({}, defaults, options || {});

            // The parent element needs positioning so that the zoomed element can be correctly positioned within.
            $root.css({
                position: /(absolute|fixed)/.test(position) ? position : 'relative',
                overflow: 'hidden'
            });

            // If a url wasn't specified, look for an image element.
            if (!settings.url) {
                settings.url = $root.find('img').attr('src');
                if (!settings.url) {
                    return;
                }
            }

            img.onload = function () {
                var 
				outerWidth,
				outerHeight,
				xRatio,
				yRatio,
				left,
				top,
				offset = $root.offset();

                function ratio() {
                    outerWidth = $root.outerWidth();
                    outerHeight = $root.outerHeight();
                    xRatio = (img.width - outerWidth) / outerWidth;
                    yRatio = (img.height - outerHeight) / outerHeight;

                    console.log("xRatio : " +xRatio);
                    console.log("yRatio : " + yRatio);
                }

                function move(e) {
                    left = (e.pageX - offset.left);
                    top = (e.pageY - offset.top);

                    console.log(e.pageX + ":" + offset.left);
                    console.log(e.pageY + ":" + offset.top);

                    if (left > outerWidth) {
                        left = outerWidth;
                    } else if (left < 0) {
                        left = 0;
                    }

                    if (top > outerHeight) {
                        top = outerHeight;
                    } else if (top < 0) {
                        top = 0;
                    }

                    img.style.left = (left * -xRatio) + 'px';
                    img.style.top = (top * -yRatio) + 'px';

                    console.log(img.style.left);
                    console.log(img.style.top);


                    console.log('----------------------------');

                    e.preventDefault();
                }

                function start(e) {
                    offset = $root.offset();
                    ratio();
                    move(e);

                    // Skip the fade-in for IE8 and lower since it chokes on fading-in
                    // and changing position based on mousemovement at the same time.
                    $img.stop()
					.fadeTo($.support.opacity ? settings.duration : 0, 1);
                }

                function stop() {
                    $img.stop()
					.fadeTo(settings.duration, 0);
                }

                $img
				.addClass('zoomImg')
				.css({
				    position: 'absolute',
				    top: 0,
				    left: 0,
				    opacity: 0,
				    width: img.width,
				    height: img.height,
				    border: 'none',
				    maxWidth: 'none'
				})
				.appendTo($root);

                ratio(); // Pre-emptively call ratio because IE7 will fire the mousemove callback before the hover callback.

                $img.hover(
						start,
						stop
					)['mousemove'](move);
            };

            img.src = settings.url;
        });
    };
} (jQuery));